<!DOCTYPE html>
<meta charset="utf-8">
<style>
@font-face {
    font-family: NotoSansCJK;
    src: url("../../../../../third_party/test_fonts/test_fonts/NotoSansCJKjp-Regular.otf") format("opentype");
}

body {
  font-size: 40px;
}

.atomic {
  display: inline-block;
  height: 30px;
  width: 20px;
  background: lightblue;
}

.container-modern {
  font-family: NotoSansCJK;
  border: 1px solid lime;
}

.container-legacy {
  font-family: 'Hiragino Maru Gothic ProN', 'MS Gothic';
  border: 1px solid lime;
}

.v {
  display: inline-block;
  writing-mode: vertical-rl;
  height: 5em;
}

.vlr {
  display: inline-block;
  writing-mode: vertical-lr;
  height: 5em;
}
</style>
<body>

<!--
  All gaps between a ruby base and a ruby annotation text should have similar
  size.  crbug.com/1082087
-->
<table border=0>
<tr>
<td class="container-modern"><ruby>焼肉定食<rt>じゃくにくきょうしょく</ruby><br>
  <ruby style="ruby-position:under;">和洋折衷<rt>わようせっちゅう</ruby><br>
  <ruby style="ruby-position:under;">雨過天晴<rt>うか<span class="atomic"></span>てんせい</ruby>
<td class="container-legacy"><ruby>焼肉定食<rt>じゃくにくきょうしょく</ruby><br>
  <ruby style="ruby-position:under;">和洋折衷<rt>わようせっちゅう</ruby><br>
  <ruby style="ruby-position:under;">雨過天晴<rt>うか<span class="atomic"></span>てんせい</ruby>

<tr>
<td><div class="container-modern v"><ruby>弱肉強食<rt>やきにくていしょく</ruby></div>
<div class="container-modern vlr"><ruby>弱肉強食<rt>やきにくていしょく</ruby></div>
<td><div class="container-legacy v"><ruby>弱肉強食<rt>やきにくていしょく</ruby></div>
<div class="container-legacy vlr"><ruby>弱肉強食<rt>やきにくていしょく</ruby></div>
</table>

<script>
if (window.testRunner) {
  testRunner.waitUntilDone();
  document.fonts.ready.then(function() {
    testRunner.notifyDone();
  });
}
</script>
</body>
